<template>
  <div
    ref="suggest"
    class="suggest"
    v-loading="loading"
    v-noResult="!loading && songs.length === 0"
  >
    <ul class="suggest-inner">
      <li v-for="item in songs" :key="item.id" @click="selectSong(item)">
        <div class="icon"></div>
        <div class="name">{{ item.name }}-{{ item.singer }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { nextTick, ref, watch, computed } from 'vue'
import usePullupLoad from './usePullupLoad'
import { search } from '@/api/search'
import { processSongs } from '@/api/song'
import { useStore } from 'vuex'
import { getObjLocal, setObjLocal } from '@/assets/js/localStore'

export default {
  name: 'Suggest',
  props: {
    inputValue: {
      type: String
    }
  },
  emits: ['select-song'],
  setup(props, { emit }) {
    const songs = ref([])
    const hasMore = ref(true)
    const query = ref(props.inputValue)
    const page = ref(1)
    const loading = ref(false)
    const { state } = useStore()

    const { suggest, scroll } = usePullupLoad(hasMore, page, searchApi)

    const fullScreen = computed(() => {
      return state.play.fullScreen
    })

    watch(
      () => props.inputValue,
      newValue => {
        query.value = newValue
        reset()
        if (newValue) {
          searchApi()
        }
      }
    )

    watch(fullScreen, () => {
      scroll.value.refresh()
    })

    // 获取数据
    async function searchApi() {
      const params = {
        query: query.value,
        page: page.value,
        singer: false
      }
      loading.value = true
      const res = await search(params)
      if (res.code === -1) {
        loading.value = false
        return
      }
      const songsWithUrls = await processSongs(res.result.songs)
      hasMore.value = res.result.hasMore
      songs.value.push(...songsWithUrls)
      await nextTick()
      // 判断数据是否充满一屏
      if (scroll.value.maxScrollY >= -1 && hasMore.value && query.value) {
        page.value++
        searchApi()
      } else {
        loading.value = false
      }
    }

    // 重置部分数据
    function reset() {
      songs.value = []
      page.value = 1
      hasMore.value = true
      scroll.value && scroll.value.scrollTo(0, 0)
    }

    function selectSong(song) {
      storeHistory(song)
      emit('select-song', song)
    }

    function storeHistory(song) {
      const history = getObjLocal('SEARCH_HISTORY')
      if (history && history.length) {
        const result = history.find(item => item.id === song.id)
        if (!result) {
          history.push(song)
          history.length > 20 && history.shift()
          setObjLocal('SEARCH_HISTORY', history)
        }
      } else {
        setObjLocal('SEARCH_HISTORY', [song])
      }
    }

    return {
      songs,
      hasMore,
      loading,
      suggest,
      selectSong
    }
  }
}
</script>

<style lang="scss" scoped>
.suggest {
  height: 100%;
  overflow: hidden;
  padding: 0 10px;
  ul.suggest-inner {
    > li {
      display: flex;
      align-items: center;
      padding-bottom: 20px;
      .icon {
        width: 22px;
        height: 22px;
        margin-right: 10px;
        background: url('~@/assets/images/music.png') center;
        background-size: 100% 100%;
      }
      .name {
        @include no-wrap;
        flex: 1;
        font-size: 13px;
      }
    }
  }
}
</style>
